<template>
  <div class="app-container">
    <div style="padding:10px;">
      <el-form :inline="true" class="search-form">
      <el-row :gutter="20" style="display: flex;">
        <div style="flex: 1;margin-top: 5px;">
            <el-form-item label="优惠劵名称：">
              <el-input
                v-model="searchForm.coupon_name"
                class="marginBottom"
                placeholder="请输入名称"
                clearable
              />
            </el-form-item>
            <el-form-item label="领取人：">
              <el-input
                v-model="searchForm.user_name"
                class="marginBottom"
                placeholder="请输入领取人昵称"
                clearable
              />
            </el-form-item>
            <el-form-item label="状态：">
              <el-select
                v-model="searchForm.is_use"
                placeholder="请选择状态"
                clearable
              >
                <el-option
                  v-for="item in [
                    { label: '未使用', value: 1 },
                    { label: '使用中', value: 2 },
                    { label: '已使用', value: 3 },
                  ]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            </div>
            <div :span="5" style="margin: 5px 0; text-align: right">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resettingWay"
                >重置</el-button
              >
            </el-form-item>
</div>

      </el-row>
      </el-form>
    </div>
    <el-divider></el-divider>
    <div class="marginTop">
      <el-row :gutter="20">
        <el-col :span="8" style="float: right">
          <div class="right-panel el-button-group">
            <el-button
              class=""
              icon="el-icon-refresh"
              size="mini"
              @click="resettingWay"
            ></el-button>
            <el-dropdown trigger="click" :hide-on-click="false">
              <span class="el-dropdown-link">
                <el-button
                  class=""
                  icon="el-icon-s-operation"
                  size="mini"
                ></el-button>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                  <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                    tableTheadOptions[fruit].label
                  }}</el-checkbox>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-col>
        <el-col :span="24" class="marginTop">
          <el-table
            v-loading="loading"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            highlight-current-row
            :data="CouponUserList"
            style="width: 100%"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                {{ scope.row[fruit] }}
              </template>
            </el-table-column>
            <el-table-column prop="coupon_type" align="center" label="类型">
              <template slot-scope="scope">
                <span style="color: #0076f6" v-if="scope.row.coupon_type == 1"
                  >满减劵</span
                >
                <span style="color: #13ce66;" v-if="scope.row.coupon_type == 2"
                  >折扣劵</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="get_way" align="center" label="获取方式">
              <template slot-scope="scope">
                <span v-if="scope.row.get_way == 1"
                  >新人礼赠送</span
                >
                <span v-if="scope.row.get_way == 2"
                  >下单赠送</span
                >
                <span v-if="scope.row.get_way == 3"
                  >手动领取</span
                >
                <span v-if="scope.row.get_way == 4"
                  >平台发放</span
                >
              </template>
            </el-table-column>
            <el-table-column prop="is_use" align="center" label="使用状态">
              <template slot-scope="scope">
                <span v-if="scope.row.is_use == -1" style="color: #ff4949;">过期</span>
                <span v-if="scope.row.is_use == 1" style="color: #0076f6">未使用</span>
                <span v-if="scope.row.is_use == 2" style="color: #13ce66;">使用中</span>
                <span v-if="scope.row.is_use == 3" style="color: #ff4949;">已使用</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col class="marginTop" style="text-align: right">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="searchForm.count"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getCouponUserList } from "@/api/coupon/index";
const tableTheadOption = {
  id: {
    label: "id",
    field: "id",
  },
  user_id: {
    label: "用户ID",
    field: "user_id",
  },
  coupon_id: {
    label: "优惠券ID",
    field: "coupon_id",
  },
  user_name: {
    label: "用户名称",
    field: "user_name",
  },
  coupon_name: {
    label: "优惠券名称",
    field: "coupon_name",
  },
  doorsill_price: {
    label: "最低消费金额",
    field: "doorsill_price",
  },
  quota: {
    label: "面值",
    field: "quota",
  },
  created_at: {
    label: "领取时间",
    field: "created_at",
  },
};
const allTableThead = [
  "id",
  "user_id",
  "coupon_id",
  "user_name",
  "coupon_name",
  "doorsill_price",
  "quota",
  "created_at",
];
const defaultTableThead = ["user_name", "coupon_name"];

export default {
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 动态显示表头默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      loading: false,
      searchForm: {
        page: 1,
        count: 10,
        is_use: "",
        user_name: "",
        coupon_name: "",
      },
      total: 0,
      CouponUserList: [],
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getCouponUserList(this.searchForm)
        .then((res) => {
          this.loading = false;
          this.CouponUserList = res.data.list;
          console.log(res);
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resettingWay() {
      this.searchForm = {
        page: 1,
        count: 10,
        is_use: "",
        user_name: "",
        coupon_name: "",
      };
      this.getListWay();
    },
    // 商户分类切换分页
    handleCurrentChange(val) {
      this.searchForm.page = val;
      this.getListWay();
    },
    // 商户分类切换每页数量
    handleSizeChange(val) {
      this.searchForm.count = val;
      this.getListWay();
    },
  },
};
</script>

<style></style>
